<script setup lang="ts">
import { watch } from 'vue'
import { RouterView } from "vue-router";
import { useRoute } from 'vue-router';
import { ElBacktop } from "element-plus";

const route = useRoute();
const pages = [
  { link: '/', name: 'home',  text: 'Home' },
  { link: '/about', name: 'about', text: '行为组织学' },
  { link: '/probability', name: 'probability', text: '概率论与数理统计' },
  { link: '/english1', name: 'english1', text: '大学英语1' },
  { link: '/english2', name: 'english2', text: '大学英语2' },
  { link: '/english3', name: 'english3', text: '大学英语3' },
  { link: '/english4', name: 'english4', text: '大学英语4' }
]

watch(
  route,
  (val: any) => {
    document.title = val.name
  }
)

</script>

<template>
  <header>
    <div class="wrapper">
      <div class="nav">
        <a v-for="p in pages" :href="p.link" :class="route.name === p.name ? 'active' : ''">{{p.text}}</a>
        <span > </span>
      </div>
    </div>
  </header>

  <div class="RouterView">
    <RouterView />
  </div>
  <el-backtop :right="50" :bottom="100" />
</template>

<style scoped>
.router-link-active{
  color: green;
  background-color: #fff;
}
header {
  line-height: 1.5;
  max-height: 100vh;
  background-color: forestgreen;
}

header .wrapper {
  height: 50px;
  line-height: 50px;
  margin: 0 auto;
  text-align: center;
  overflow-x: auto;
  white-space: nowrap;
  /* background-color: red; */
}
.nav{
  width: 100%;
	height: 50px;
	line-height: 50px;
	/*段落中文本不换行*/
	white-space: nowrap;
	/*阴影*/
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	/*设置横向滚动*/
	overflow-x: scroll;
	/*禁止纵向滚动*/
	overflow-y: hidden;
	/*文本平铺*/
	/* text-align: justify; */
	/*背景颜色*/
	padding: 0px 5px;
	/*设置边距改变效果为内缩*/
	box-sizing: border-box;
}
.nav .nav-item{
  margin-right: 10px; /* 可根据需要调整间距 */
}
.nav a {
	/*取消超链接下划线*/
	text-decoration: none;
	margin: auto 10px;
  color: white;
  display: inline-block;
  padding: 0 1rem;
}
.nav a.active{
  background-color: white;
  color: green;
}
.nav::-webkit-scrollbar {
	/*隐藏滚动条*/
	display: none;
}
.nav span{
  display: inline-block;
  width: 200px;
  /* background-color: rebeccapurple; */
  height: 30px;
}

.RouterView {
  width: 80%;
  margin: 0 auto;
  padding-top: 10px;
}
</style>
